<template>
  <view class="service-recommend">
    <view class="recommend-header">
      <view class="header-left">
        <view class="chatIcon icon-xinwen"></view>
        <text>出院咨询</text>
      </view>
      <view class="recommend-count" @tap="pageStatus.showModal = true">相关服务列表</view>
    </view>

    <view class="service-desc">
      根据您的具体情况，我们会让专业的评估师，对您做一个免费的方案评估，为您指定对应理疗项目丶理疗周期以及相关费用的报价。
    </view>
  </view>

  <u-modal
    :show="pageStatus.showModal"
    :title="pageStatus.title"
    :content="pageStatus.content"
    :confirm-text="pageStatus.confirmText"
    :cancel-text="pageStatus.cancelText"
    :show-confirm-button="true"
    :show-cancel-button="true"
    confirmColor="#ffb619"
    @cancel="pageStatus.showModal = false"
    @close="pageStatus.showModal = false"
    @confirm="handleConfirm"
  >
    <!-- <template #default>
      <text style="font-weight: bold; color: #ffb619">{{ pageStatus.content }}</text>
    </template> -->
  </u-modal>
</template>

<script setup lang="ts">
import { isOnWechat } from "@/utils/util";
import { reactive } from "vue";

//#ifdef H5
import jWeixin from "weixin-js-sdk";
import webUni from "@dcloudio/uni-webview-js";
//#endif

const pageStatus = reactive({
  showModal: false,
  showLeavingAMessage: false,
  title: "提示",
  content: "查看相关服务列表将离开会话,已发送的消息会保存，是否跳转新页面？",
  confirmText: "跳转",
  cancelText: "取消",
});

// 点击服务项
const handleServiceClick = () => {
  const pam = {
    api: "navigateBack",
    data: "navigateTo",
    type: "CYZX", // 类型，我跳转H5所传的
  };
  console.log("isOnWechat", isOnWechat(), { jWeixin, webUni });
  if (isOnWechat()) {
    // jWeixin.miniProgram.postMessage({ data: pam });
    // window.open("");
    jWeixin.miniProgram.navigateTo({
      url: `/pages/public/WXWebView?params=${JSON.stringify(pam)}`,
    });
  } else {
    // console.log("webUni", webUni);
    pam.navigateBack = true;
    webUni.webView.postMessage({ data: pam });
  }
};

const handleConfirm = () => {
  pageStatus.showModal = false;
  handleServiceClick();
};
</script>

<style scoped lang="scss">
$theme-color: #ffc549;

.service-recommend {
  background-color: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  padding: 20rpx;
}

.recommend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;

  .header-left {
    display: flex;
    align-items: center;
    gap: 10rpx;
    font-size: 32rpx;
    font-weight: bold;

    .chatIcon {
      font-size: 40rpx;
      color: $theme-color;
    }
  }

  .recommend-count {
    background-color: $theme-color;
    color: #fff;
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
  }
}

.service-desc {
  font-size: 25rpx;
  color: #999;
}
</style>
